上一篇 Day 22 我們已經了解了何謂 Redux 以及該套件的三大原則,今天就要來為大家介紹在 Redux 這個套件中的核心概念及功能名詞介紹。
在 Redux 的官方文件當中有特別提到要開始使用前應該要了解的名詞和概念,所以這邊就幫大家把這些概念整理如下:
是一個帶有
type
和payload
兩個屬性的 JavaScript 物件且在其屬性中會說明資料的改變內容為何?
這邊補充說明一下,Actions 物件中的 type
屬性通常會是字串並用來指定這個 Action 類型的名稱,而 payload
屬性則是用來做處理該 Action 物件被執行時需要添加或處理的資料內容( payload
這個屬性是非必要的,所以可以視需求加入即可)。
另外, type
屬性的命名方式通常會使用 事件分類/事件名稱
,假設我們是做一個 ToDoList 的話可以這樣命名 Action 中的 type
屬性為: todos/todoAdded
當作該名稱(這個命名方式不是硬性規定,不過官方建議大家可以這樣做)。
/* 創建一個 Action 物件: addTodoAction */
const addTodoAction = {
type: 'todos/todoAdded',
payload: 'Buy milk'
}
一個接收目前的
state
和指定的action
這兩個參數的函式,並根據這兩個參數返回一個全新的 State 值。
依據官方文件的說明,我們可以這樣理解 Reducer 函式:
( 原本的 state, action 物件名稱) => 新的 state
你也可以把 Reducer 想像成是一個監聽( Event Listener )的物件,而且會根據函式內所指定的 action
類別來處理對應的事件。
另外,關於 Reducers 還有三個使用上必須遵守的原則:
state
和 action
這兩個參數所產生出來的。下面給大家看一個官方的簡易範例:
/* 宣告一個變數 initialState 並存放 State : value 的初始值為 0 */
const initialState = { value: 0 }
function counterReducer(state = initialState, action) {
/* 若此 action : counter/increment 有被觸發的話就執行 return 內的行為 */
if (action.type === 'counter/incremented') {
return {
...state,
/* 並在這邊更新複製的 State 值 +1 */
value: state.value + 1
}
}
return state
}
在 Redux 套件中儲存我們整個應用程式中的 State 的地方,而且整個應用程式中只會有一個 Store 物件。
我們會使用 Redux 套件中的 createStore
的方法來幫我們先建立一個全新的 Store 來存放 State 的值,再將我們需要存入此 Store 的內容(包含了 action
和 reducer
這兩個物件)匯入到這個 Store 當中。
備註:通常我們會在專案內建立個別的目錄來分別存放 action
、 reducer
和 store
等資料,這邊會需要載入的就是在 reducer
資料夾所建立的一個 rootReducer
。
import { createStore } from 'redux';
import rootReducer from './rootReducer';
const store = createStore(
rootReducer
);
在 Redux 中唯一可以修改 Store 內所儲存到 State 值的方式就是將一個設定好的 Action 物件傳入到此方法內。
/* 將一個 type: 'counter/incremented' 的 action 物件傳入 dispatch 方法內 */
store.dispatch({ type: 'counter/incremented' })
/* 印出 store 內目前 state 最新被該 action 物件所修改過的值 */
console.log(store.getState())
關於 Redux 的功能還有它的核心概念就先為大家介紹到這了。我覺得 Redux 的章節真的比前面都要複雜一些,不單只是較多的功能和方法,最主要的原因是出在我並沒有實際使用 Redux 做開發,所以這些理論跟功能實在是有吸收但不曉得有沒有真的理解了哈哈。
所以下面這邊我想給大家提供幾篇前輩大大們的鐵人文章,裡面針對 Redux 的實際應用還有其他更進階的功能介紹。我個人是希望自己有實作並使用過後再來學習更進階的 Redux 使用方法,大大們的文章為大家整理如下:
那明天想跟大家介紹的是在 React.js 中撰寫樣式的方法,因為鐵人賽的最後我會實作一個 React.js 的網站,加上前面的章節都是著重在 React.js 的邏輯與功能部分,所以會在明天為大家補上畫面樣式的章節囉!
有任何問題一樣都非常非常歡迎提出和指教唷~
那我們下篇見ʘ‿ʘ